<template>
  <div class="class-engagement">
    <h3>课堂活跃度分析</h3>

    <div class="engagement-item">
      <h4>力学课堂</h4>
      <table>
        <tr>
          <td>人均低头次数</td>
          <td>{{ data.physicsClass.lookDownAvg }}</td>
        </tr>
        <tr>
          <td>人均回答问题次数</td>
          <td>{{ data.physicsClass.answerQuestionsAvg }}</td>
        </tr>
      </table>
    </div>

    <div class="engagement-item">
      <h4>电磁学课堂</h4>
      <table>
        <tr>
          <td>人均低头次数</td>
          <td>{{ data.electromagneticsClass.lookDownAvg }}</td>
        </tr>
        <tr>
          <td>人均回答问题次数</td>
          <td>{{ data.electromagneticsClass.answerQuestionsAvg }}</td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  props: {
    data: {
      type: Object,
      required: true
    }
  }
});
</script>

<style scoped>
.class-engagement {
  margin-bottom: 30px;
}

.engagement-item {
  margin-bottom: 20px;
  padding: 15px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

tr {
  border-bottom: 1px solid #eee;
}

td {
  padding: 8px 12px;
}

td:first-child {
  width: 40%;
}
</style>
